<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<style>
	#container {
	  width: 400px;
	  height: 400px;
	  position: relative;
	  background: yellow;
	}
	#animate {
	  width: 50px;
	  height: 50px;
	  position: absolute;
	  background-color: red;
	}
</style>
<body>

	<p>
		<button onclick="myMove()">单击我</button>
	</p> 

	<div id ="container">
	  <div id ="animate"></div>
	</div>
	
	<script>
	function myMove() {
		// 获取动画元素
	  var elem = document.getElementById("animate"); 
	  // 初始位置  
	  var pos = 0;
	  // 1.回调函数 2.定时
	  var id = setInterval(frame, 5);
	  function frame() {
	    if (pos == 350) {
	      clearInterval(id);
	    } else {
	      pos++; 
	      // 改变css的属性
	      elem.style.top = pos + "px"; 
	      elem.style.left = pos + "px"; 
	    }
	  }
	}
	</script>
</html>